<template>
  <div>
    <van-nav-bar
        left-arrow
        @click-left="$router.go(-1)"
        :title="this.$route.meta.title"
        right-text
      >
        <template #right v-if="this.$route.meta.a">删除</template>
      </van-nav-bar>
    <van-field v-model="text" label="姓名" placeholder="输入收货人姓名" />
    <van-field v-model="text" label="手机号码" placeholder="输入手机号码" />
    <van-field v-model="text" label="邮政编码" placeholder="输入邮政编码" />
    <van-field
      is-link
      readonly
      clickable
      name="area"
      :value="value"
      label="所在区域"
      placeholder="选择所在的省份、城市、区县"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area
        title="标题"
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
      />
    </van-popup>
    <van-field
      v-model="text"
      label="详细地址"
      placeholder="街道、楼牌号等详细地址"
    />
    <van-field name="radio">
      <template #input>
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1" class="text">设为默认收货地址</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-button round block type="info" native-type="submit">保存</van-button>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  name: "WorkspaceJsonAdd",

  data() {
    return {
      areaList,
      showArea: false,
      value: "",
      text: "",
      showArea: false,
      radio: 1,
    };
  },

  mounted() {},

  methods: {
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
  },
};
</script>

<style lang="less" scoped>
.text {
  color: gainsboro;
}
/deep/.van-button {
  background: #1abc9c;
  border: none;
  width: 90%;
  border-radius: 0;
  margin-left: 15px;
}
</style>